<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

import LangSwitch from "./components/LangSwitch.vue";
import PhotoDisplay from "./components/photoDisplay.vue";
import VideoDisplay from "./components/videoDisplay.vue";
import AskingDisplay from "./components/askingDisplay.vue";
import MessageDisplay from "./components/messageDisplay.vue";
import SliderVerify from "@/components/SliderVerify.vue";

const getAssetsFile = (url) => {
  return new URL(`/public/img/${url}.png`, import.meta.url).href;
};
const getPCAssetsFile = (url) => {
  return new URL(`/public/img/pc/${url}.png`, import.meta.url).href;
};
const router = useRouter();
const text1 = ref(t("robotXZ"));
const text2 = ref(`${t("welcome")}!`);
const moveSelect = ref(0);
const curSelect = ref(null);
const curSelectType = ref("");
const navList = ref([
  {
    index: 0,
    title: "metaverseFiling",
    talk: "talk_metaverseFiling",
    src: "yyz",
    type: "web",
    pageUrl: "https://new.gzac.org/login?type=yuanbang#/",
  },
  {
    index: 1,
    title: "caseFiling",
    talk: "talk_caseFiling",
    src: "wylian",
    type: "web",
    pageUrl: "https://new.gzac.org/secretary/login?type=litigant&source=robot",
  },
  {
    index: 2,
    title: "leaveAMessage",
    talk: "talk_leaveAMessage",
    src: "liuyan",
    type: "ly",
  },
  {
    index: 3,
    title: "consultation",
    talk: "talk_consultation",
    src: "wyzx",
    type: "zx",
  },
  {
    index: 4,
    title: "circleFriends",
    talk: "talk_circleFriends",
    src: "gzpyq",
    type: "photo",
    listKey: "pyq",
  },
  {
    index: 5,
    title: "3N",
    talk: "talk_3N",
    src: "3ntingshi",
    type: "photo",
    listKey: "3n",
  },
  {
    index: 6,
    title: "odr",
    talk: "talk_odr",
    src: "odrpt",
    type: "video",
    listKey: "odr",
  },
  {
    index: 7,
    title: "arbitrationDay",
    talk: "talk_arbitrationDay",
    src: "gzczr",
    type: "video",
    listKey: "zcr",
  },
  {
    index: 8,
    title: "promoVideo",
    talk: "talk_promoVideo",
    src: "xcsp",
    type: "video",
    listKey: "xc",
  },
]);
const show = ref(false);
let timer = null;

onMounted(async () => {
  timer = setInterval(() => {
    if (moveSelect.value < 8) {
      moveSelect.value++;
    } else {
      moveSelect.value = 0;
    }
  }, 2000);
});

const handleClick = (i, t) => {
  clearInterval(timer);
  curSelectType.value = t;
  if (navList.value[i].type === "web") {
    window.open(navList.value[i].pageUrl, "_self");
  } else {
    curSelect.value = i;
  }
};
const mouseEnter = (i) => {
  clearInterval(timer);
  moveSelect.value = i;
};
const mouseLeave = (i) => {
  if (curSelect.value) {
    moveSelect.value = null;
  }
  if (!curSelectType.value) {
    timer = setInterval(() => {
      if (moveSelect.value < 8) {
        moveSelect.value++;
      } else {
        moveSelect.value = 0;
      }
    }, 2000);
  }
};
</script>

<template>
  <div class="web">
    <div class="header">
      <img src="/public/img/logo.png" alt="" />
      <lang-switch class="langSwitch"></lang-switch>
    </div>
    <div class="container">
      <div class="conLeft">
        <div class="robotBox">
          <img
            class="robot"
            :src="
              curSelectType
                ? getPCAssetsFile('robot-2')
                : getPCAssetsFile('robot-1')
            "
            alt=""
          />
          <!-- <img v-if="!curSelect" src="/public/img/pc/robot-1.png" alt="" /> -->
          <!-- <img v-else src="/public/img/pc/robot-2.png" alt="" /> -->
          <div class="talkBubble">
            {{ $t(navList[curSelect || moveSelect].talk) }}
          </div>
          <div
            v-for="(item, index) in navList"
            :key="index"
            :class="['bubble', 'bubble' + index]"
            @click="handleClick(index, item.type)"
            @mouseenter="mouseEnter(index)"
            @mouseleave="mouseLeave(index)"
          >
            <img
              class="bubble"
              :src="
                moveSelect === index || curSelect === index
                  ? getAssetsFile('bubble-empty-light')
                  : getAssetsFile('bubble-empty')
              "
              alt=""
            />
            <span class="bubbleText">{{ $t(item.title) }}</span>
          </div>
          <!-- <div class="bubble bubble0" @click="handleClick(0)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("metaverseFiling") }}</span>
          </div>
          <div class="bubble bubble1" @click="handleClick(1)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("caseFiling") }}</span>
          </div>
          <div class="bubble bubble2" @click="handleClick(2)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("leaveAMessage") }}</span>
          </div>
          <div class="bubble bubble3" @click="handleClick(3)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("consultation") }}</span>
          </div>
          <div class="bubble bubble4" @click="handleClick(4)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("circleFriends") }}</span>
          </div>
          <div class="bubble bubble5" @click="handleClick(5)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("3N") }}</span>
          </div>
          <div class="bubble bubble6" @click="handleClick(6)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("odr") }}</span>
          </div>
          <div class="bubble bubble7" @click="handleClick(7)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("arbitrationDay") }}</span>
          </div>
          <div class="bubble bubble8" @click="handleClick(8)">
            <img class="bubble" :src="getAssetsFile('bubble-empty')" alt="" />
            <span class="bubbleText">{{ $t("promoVideo") }}</span>
          </div> -->
        </div>
      </div>
      <div class="conRight">
        <div v-if="curSelectType === ''" class="welcomeText">
          <div class="text1">{{ $t("robotXZ") }}</div>
          <div class="text2">{{ $t("welcome") }}!</div>
        </div>
        <div v-else-if="curSelectType === 'photo'">
          <photo-display :photoKey="navList[curSelect].listKey"></photo-display>
        </div>
        <div v-else-if="curSelectType === 'video'">
          <video-display :photoKey="navList[curSelect].listKey"></video-display>
        </div>
        <div v-else-if="curSelectType === 'zx'">
          <asking-display></asking-display>
        </div>
        <div v-else-if="curSelectType === 'ly'">
          <message-display></message-display>
        </div>
      </div>
    </div>
    <div class="footer">
      <span>{{ $t("address") }}: {{ $t("addressDetails") }}</span>
      <span>{{ $t("contact") }}: {{ $t("contactDetails") }}</span>
      <span>{{ $t("email") }}: {{ $t("emailDetails") }}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.web {
  height: 100%;
  background: url("/public/img/pc/bg.png") no-repeat bottom center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .header {
    height: 95px;
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 200px;
    }
  }
  .container {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 135px);
    .conLeft {
      flex: 1;
      position: relative;
      .robotBox {
        width: 250px;
        height: 545px;
        position: absolute;
        left: 53%;
        bottom: 2%;
        transform: translate(-50%, 0%);
        .robot {
          width: 250px;
          height: 545px;
        }
        .talkBubble {
          font-size: 15px;
          position: absolute;
          right: -210px;
          top: -15px;
          width: 195px;
          min-height: 20px;
          background: rgba(6, 37, 166, 0.88);
          box-shadow: inset 0px 0px 10px 0px rgba(0, 255, 255, 1),
            3px 0px 5px #fff;
          border-radius: 32px 32px 32px 1px;
          padding: 13px 20px;
          color: #fff;
        }
        .bubble {
          width: 110px;
          cursor: pointer;
        }
        .bubbleText {
          width: 84px;
          font-size: 15px;
          color: #fff;
          text-align: center;
          line-height: 18px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .bubble0 {
          position: absolute;
          left: -110px;
          top: -15px;
        }
        .bubble1 {
          position: absolute;
          left: -180px;
          top: 90px;
        }
        .bubble2 {
          position: absolute;
          left: -210px;
          top: 210px;
        }
        .bubble3 {
          position: absolute;
          left: -180px;
          top: 325px;
        }
        .bubble4 {
          position: absolute;
          left: -110px;
          top: 420px;
        }
        .bubble5 {
          position: absolute;
          right: -110px;
          top: 420px;
        }
        .bubble6 {
          position: absolute;
          right: -180px;
          top: 325px;
        }
        .bubble7 {
          position: absolute;
          right: -210px;
          top: 210px;
        }
        .bubble8 {
          position: absolute;
          right: -180px;
          top: 90px;
        }
      }
    }
    .conRight {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .welcomeText {
        color: #fff;
        text-align: center;
        .text1 {
          font-size: 40px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fff;
          text-align: center;
          line-height: 54px;
        }
        .text2 {
          font-size: 100px;
          font-family: PingFang-SC-Heavy, PingFang-SC;
          font-weight: 800;
          color: #fff;
          text-align: center;
          line-height: 140px;
          text-shadow: 2px 2px #fff;
          text-shadow: 1px 0px #262f89, 1px 2px #262f89, 3px 1px #262f89,
            2px 3px #262f89, 4px 2px #262f89, 4px 4px #4460bd;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 19, 124, 0.85);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
}
</style>
<style lang="less">
.toastWidth {
  width: unset;
  min-width: var(--van-toast-default-width);
}
</style>
